<template>
  <div class="waterList">
    <!-- 头部tab -->
    <div class="header-wrap">
      <span class="header-wrap-left"  @click="goback">
        <i class="iconback iconfont icon-fanhui"></i>
      </span>
      <span class="header-wrap-text">订单列表</span>
      <span class="header-wrap-right" @click="showSeach">
        <i class="iconseach iconfont icon-sousuo"></i>
      </span>
    </div> 
    <!-- 搜索 -->
    <div class="seach" v-if="srach">
      <van-search
        v-model="value"
        placeholder="请输入需要查询的内容"
        shape="round"
        @input = 'ordersku'
      >
      </van-search>
    </div>
    <!-- 订单列表 -->
    <div ref="HeightAuto" style="margin-top:1.2rem;">
      <div class="allpay-list" v-for="(message,index) in order" :key="index">
        <div class="img-box">
          <div class="img-content" style="background:#fff;">
            <img :src="message.image" alt="">
            <!-- <i class="icon iconfont" v-html="message.icon"></i> -->
          </div>
        </div>
        <div class="pay-content">
          <span>{{message.goods_name}}</span>
          <span>{{message.sku_name}}</span>
          <span>金额：&nbsp;¥&nbsp;{{message.price}}元</span>
          <span>数量：{{message.quantity}}</span>
        </div>
      </div>
    </div>
    <Tips v-if="show"/>
  </div>
</template>
<script>
import api from '../../api/api.js'
import { Search } from 'vant';
import  Tips  from '../../components/tips';
export default {
  data(){
    return{
       value:'',
       order:[],
       srach:false,
       show:false,
       length:''
    }
  },
  created(){
    this.ordersku()
  },
  methods:{
    goback(){
      this.$router.go(-1)
    },
    showSeach(){
      this.srach = !this.srach
      if(this.srach==true){
        this.$refs.HeightAuto.style.marginTop = '2rem'
      }else{
        this.$refs.HeightAuto.style.marginTop = '1.2rem'
      }
    },
    // 获取订单列表
    ordersku(){
      this.$get(api.ordersku, {
        params: {
          search: this.value?this.value:undefined
        }
      })
      .then((response) => {
        this.order = response.data.msg
        this.length = response.data.msg.length
        if(this.length!=0){
          this.show = false  
        }else{
          this.show = true
          this.$toast.loading({
            message:'暂无搜索内容',
            duration: 350
          })
        }
      })
      .catch((error) => {
        console.log(error)
      });
    },
  },
  components:{
    Tips,
    [Search.name]:Search,
  }
}
</script>
<style>
.waterList .van-field__body input{
  caret-color: #000; /* 光标颜色 */ 
}
.waterList .van-search{
  background: none!important;
}
.waterList .van-search__action{
  color: #000;
}
</style>
<style scoped>
.seach{
  position: fixed;
  top: 1rem;
  left: 0;
  width: 100%;
  height: 1rem;
  background: #fff;
  z-index: 888;
}
.allpay-list{
  display: flex;
  height: 2.5rem;
  background: #fff;
  margin: .25rem .3rem;
  border-radius: .2rem;
}
.img-box{
  flex: 1.5;
  margin-right: .2rem;
}
.img-content{
  position: relative;
  width: 100%;
  height: 100%;
}
.img-content img{
  width: 100%;
  height: 100%;
  border-radius: .2rem 0 0 .2rem;
}
.pay-content{
  flex: 3;
  padding-top: .28rem;
}
.pay-content span{
  display: block;
  line-height: .5rem;
}
.pay-content span:nth-of-type(1){
  font-size: .32rem;
  color: #000;
  font-weight: bold;
}
.pay-content span:nth-of-type(2){
  color: #FD5585;
  font-weight: bold;
}
.pay-content .paytext{
  display: flex;
}
.pay-content .paytext span{
  flex: 1;
  line-height: .5rem;
}
</style>